!<template>
  <div class="main">
    <Layout>
      <!-- aside -->
      <Sider
        hide-trigger
        collapsible
        :width="180"
        :collapsed-width="64"
        v-model="collapsed"
        class="left-sider"
        :style="{ overflow: 'hidden' }">
        <sideMenu></sideMenu>
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" />
        </div>
      </Sider>
      <Layout>
        <!-- Header -->
        <Header>
          <!-- on-coll-change这是接收子传的值 -->
          <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange"></header-bar>
        </Header>
        <!-- Content -->
        <Content>Content</Content>
        <!-- Footer -->
        <Footer>
          <baseF></baseF>
        </Footer>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import baseF from "../components/main/components/footer/index.vue"; //引入footer
// 引入图片
import minLogo from "../assets/image/home/logo-min.jpg";
import maxLogo from "../assets/image/home/logo.jpg";
import headerBar from "../components/main/components/header/header-bar.vue";
import sideMenu from "../components/main/components/sider/side-menu/index.vue"; //侧边栏的值
export default {
  data() {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
    };
  },
  components: {
    baseF,
    sideMenu,
    headerBar,
  },
  methods:{
    handleCollapsedChange (state) {
      this.collapsed = state
    },
  }
};
</script>
<style lang="scss" scoped>
.main {
  cursor: pointer;
  //sider
  .ivu-layout-sider {
    /deep/.ivu-layout-sider-children {
      height: 100vh !important;
      background: black;
      .logo-con {
        height: 64px;
        padding: 10px;
        img {
          height: 44px;
          width: auto;
          display: block;
          margin: 0 auto;
        }
      }
      .left-sider {
        .ivu-layout-sider-children {
          overflow-y: scroll;
          margin-right: -18px;
        }
      }
    }
  }
  // header
  .ivu-layout-header {
    padding: 0 !important;
    .left-sider {
      .ivu-layout-sider-children {
        overflow-y: scroll;
        margin-right: -18px;
      }
    }
  }
  // content
  .ivu-layout-content {
  }
}
</style>